<template>
  <el-card class="box-card">
    <logheader @searchFn="searchFn" @aClickFn="aClickFn" @outClickFn="outClickFn"></logheader>
    <loglist :logArr="logArr"></loglist>
    <logpage
      @changePageSize="changePageSize"
      @changePage="changePage"
      :page="page"
      :pageSize="pageSize"
      :pageSizes="pageSizes"
      :total="total"
    ></logpage>
  </el-card>
</template>

<script type="text/javascript">
import logheader from "./components/Logheader.vue";
import loglist from "./components/Loglist.vue";
import logpage from "./components/Logpage.vue";

import { getLogApi } from "@/api/logApi";
import ExportJsonExcel from "js-export-excel"

export default {
  components: {
    logheader,
    loglist,
    logpage,
  },
  data() {
    return {
      logArr: [], //保存表格数据
      shearchWord: "", //保存搜索关键词
      page: 1, //当前页
      pageSize: 20, //每页显示多少条
      total: 0,
      pageSizes: [20, 40, 60, 80],
    };
  },
  mounted() {
    this.initGetLog();
  },
  methods: {
    changePageSize(val) {
      // 控制pagesize切换
      this.pageSize = val;
      this.initGetLog();
    },
    changePage(val) {
      this.page = val;
      this.initGetLog();
    },
    initGetLog() {
      getLogApi({
        shearchWord: this.shearchWord,
        page: this.page,
        pageSize: this.pageSize,
      }).then((res) => {
        // console.log("res", res);
        if (res.code == 200) {
          this.logArr = res.data;
          this.total = res.total;
        }
      });
    },
    //val就是关键词
    searchFn(val) {
      this.shearchWord = val;
      this.initGetLog();
    },
    aClickFn(val){
      this.shearchWord = val;
      this.initGetLog();
    },
    outClickFn(){
      // console.log("12");
      const dataList = this.logArr;
      let option = {};  //   option代表的就是excel文件
      let dataTable = [];   //   dataTable代表excel文件中的数据内容
      if (dataList) {
        for (let i in dataList) {

          let obj = {
            时间: dataList[i].date,
            大棚作物类型: dataList[i].croptype,
            设备: dataList[i].equipment,
            工作完成情况:dataList[i].work== true ? "已完成" : "未完成",
          };
          dataTable.push(obj);   //   设置excel每列获取的数据源
        }
      }
      
      option.filename = "农作物操作日志";  //excel文件名
      //excel文件数据
      option.datas = [
        {
          //   excel文件的数据源
          sheetData: dataTable,
          //   excel文件sheet的表名
          sheetName: "sheet",
          //   excel文件表头名
          sheetHeader: ["时间", "大棚作物类型", "设备","工作完成情况"],
          //   excel文件列名
          sheetFilter: ["时间", "大棚作物类型", "设备","工作完成情况"],
        },
      ];
      //   创建ExportJsonExcel实例对象
      let toExcel = new ExportJsonExcel(option);
      //   调用保存方法
      toExcel.saveExcel();
    },
  
  },
};
</script>

<style lang="less" scoped>
* {
  font-size: 14px;
  color: #435177;
}
.box-card {
  margin: 24px;
  padding-top: 44px;
}

.el-dropdown-link {
  cursor: pointer;
  //   color: #409eff;
  background-color: #8492a6;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
